<template>
    <div class="ordering">
        <div>
            <el-page-header>
                <template #breadcrumb>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: 'adminhome' }">
                            管理员主页
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>实践课程信息管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </template>
            </el-page-header>
        </div><br />
        <div class="heading">实践课程信息展示</div>
        <el-divider />
        <div>

            <!-- 课程信息列表 -->
            <div>
                <el-table :data="tableData" style="width: 100%" height="350">
                    <el-table-column fixed prop="courseId" label="课程编号" min-width="100" />
                    <el-table-column prop="courseName" label="课程名" min-width="100" />
                    <el-table-column fixed="right" label="大纲" width="220">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="downSchema(scope.row.courseId)">下载大纲</el-button>
                            <el-button link type="primary" size="small"
                                @click="changeSchema(scope.row.courseId)">修改大纲</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 上传大纲 -->
            <el-dialog v-model="dialogDowenLoad" title="修改课程大纲">
                <el-upload class="upload-demo" drag :action="myurl" :show-file-list="false" multiple
                    :on-success="uploadFileHandler" :on-error="uploadFileErrorHandler"
                    :on-progress="uploadFileOnProgressHandler" :data=token>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <!--     <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
            </el-dialog>

            <div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="实践课程信息上传" name="first">
                        <el-upload class="upload-demo" drag action="http://localhost:8080/excel/import_PracticeCourse"
                            :show-file-list="false" multiple :on-success="uploadFileHandler"
                            :on-error="uploadFileErrorHandler" :on-progress="uploadFileOnProgressHandler" :data=token>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <!--     <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="上传提示" name="second">
                        <el-text class="mx-1" size="large">
                            1. 文件的上传应选择excel表格形式，表格列应与要求中一致；
                        </el-text>
                        <br />
                        <el-text class="mx-1" size="large">
                            2. 表格上传一次最多上传一个文件，后文件会覆盖前文件的内容，请谨慎上传；
                        </el-text>
                        <br />
                        <el-text class="mx-1" size="large">
                            3. 请认真核对表格信息后上传，上传后只能覆盖不能修改信息。
                        </el-text>
                    </el-tab-pane>
                    <el-tab-pane label="常见问题" name="third">
                        <el-text class="mx-1" size="large">
                            1. 系统加载缓慢，上传后展示列表不显示信息。
                            解决方案： 请尽快联系维护员。
                        </el-text>
                        <br />
                        <el-text class="mx-1" size="large">
                            2. 文件上传失败的可能性
                            文件过大或者文件的格式不对。
                        </el-text>
                    </el-tab-pane>
                    <el-tab-pane label="系统维护员联系" name="fourth">
                        <el-descriptions title="维护员">
                            <el-descriptions-item label="姓名：">殷凡卓</el-descriptions-item>
                            <el-descriptions-item label="联系电话：">18100000000</el-descriptions-item>
                            <el-descriptions-item label="办公地址：">中原校区 基础实验楼102</el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup >
import { ref, onBeforeMount, toRefs, onBeforeUnmount, reactive } from 'vue'
import requests from '@/api/ajax.js'
import { genFileId } from 'element-plus'


const dialogDowenLoad = ref(false)

// const token = ref({
//     token: ''
// });
// token.value.token = localStorage.getItem('user') // 替换为自己的 token
// //console.log("++"+token.value);
// // token.value = 'Bearer'+ token .value;
// console.log("++" + token.value);

/* const url1 = "http://localhost:8080/excel/import_PracticeCourse/test?token=" + token.value
console.log("++" + url1)
 */

/* console.log(token); */
const tableData = ref([{
    practicalId: '',
    classId: "",
    className: "",
    adviserId: '',
    adviserName: "",
    teachId: '',
    teachName: "",
    practicalType: '',
    onloadDate: "",
    courseSchema: '',
    planId: '',
    courseId: '',
    courseName: "",
    startDate: '',
    majorName: "",
    enrolDate: "",
}])

onBeforeMount(() => {

    //请求学生信息
    const aacom = requests({ url: "/excel/allPracticeCourseVo", method: "get", }).then(res => {
        //存储信息到浏览器toke
        const abc = res.rdata
        tableData.value = abc
        console.log(res)
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });
})

const practicalCourse = ref('')


//以下全部为文件上传需要的内容
let myurl = ref()
//获取需要修改大纲的课程的课程ID
function changeSchema(courseId) {

    dialogDowenLoad.value = true;
    myurl.value = "http://localhost:8080/excel/upload/practiceCourse/" + courseId;

}

const token = ref({
    token: ''
});
token.value.token = localStorage.getItem('user') // 替换为自己的 token

function uploadFileHandler(res) {
    console.log(res)
    setTimeout(() => {
        this.loading.close();
        if (res.code == 20011) {
            this.$message.error(res.msg)
        } else {
            this.$message.success(res.msg)
        }

    }, 1000);
    dialogDowenLoad.value = false;

}
function uploadFileErrorHandler(res) {
    this.$message.error("上传失败,请检查网络连接")
}
function uploadFileOnProgressHandler(res) {
    // this.$message("上传中...")
    this.fullScreenLoading()
}
function fullScreenLoading() {
    this.loading = this.$loading({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });

}





function downSchema(courseId) {
    // if(filePath != null){
    const getReport = requests({ url: "/preview/practiceCourse/" + courseId, method: "get", responseType: 'blob', }).then(res => {
        // const blob = new Blob([res.rdata], { type: res.rdata.type });
        // saveAs(blob, 'example.docx');

        // 将响应数据转换为 Blob 对象
        const blob = new Blob([res]);
        // 创建链接进行下载
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = '课程大纲.docx';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

    })
        .catch(err => {
            console.error(err);
            // 登录请求失败后的操作
        });
    // }else{
    //     alert('本课程还未上传课程大纲')
    // }
}


// function uploadFileHandler(res) {
//     console.log(res)
//     setTimeout(() => {
//         this.loading.close();
//         if (res.code == 201) {
//             this.$message.error(res.msg)
//         } else {
//             this.$message.success(res.msg)
//         }

//     }, 1000);
// }
// function uploadFileErrorHandler(res) {
//     this.$message.error("上传失败,请检查网络连接")
// }
// function uploadFileOnProgressHandler(res) {
//     // this.$message("上传中...")
//     this.fullScreenLoading()
// }
// function fullScreenLoading() {
//     this.loading = this.$loading({
//         lock: true,
//         text: '文件上传中...',
//         spinner: 'el-icon-loading',
//         background: 'rgba(0, 0, 0, 0.7)'
//     });

// }
</script>

<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>